import React, { Component } from 'react'
import Mouse from './Mouse'
import Position from './Position'
import HuDie from './HuDie'
// import HuDie from './HuDie'

// const Position = (props) => {
//   return (
//     <div>
//       <p>
//         x: {props.x}---y:{props.y}
//       </p>
//     </div>
//   )
// }
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 把Position 当做一个函数 */}
        {/* <Mouse render={(mouse) => Position(mouse)} /> */}
        {/* 把Position 当做一个组件 */}
        {/* <Mouse render={(mouse) => <Position {...mouse} />} /> */}

        {/* <Mouse render={(mouse) => HuDie(mouse)} />
        <Mouse render={(mouse) => <HuDie {...mouse} />} /> */}
        {/* <Mouse /> */}
        <Mouse>{(mouse) => Position(mouse)}</Mouse>
        <Mouse>{(mouse) => <Position {...mouse} />}</Mouse>
      </div>
    )
  }
}
